<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>05-JSON数据的Ajax请求</h1>
    <br/>
    <a href="/index.html">返回首页</a>
    <br/><br/>
    <input type="text"><br/><br/>
    <button>发送ajax请求，获取json数据</button>

    <script>
        // 获取上面的button节点对象
        const bn = document.querySelector("button");
        // 为当前按钮绑定点击事件处理
        bn.onclick = function(){
            // 创建ajax请求对象，并执行发送：
            
            // 1) 创建XMLHttpRequest对象
            const xhr = new XMLHttpRequest();
            xhr.responseType = "json"; // 设置响应数据类型（以这种方式处理服务器端响应的数据）
            // 2) 设置请求信息(请求方式get，请求url地址为 /data )
            xhr.open("GET","/data");
            // 3) 发送请求
            xhr.send();
            // 4) 接收响应（请求状态改变事件处理）
            xhr.onreadystatechange = function(){
                // 输出请求状态值
                //console.log(xhr.readyState); 
                // 当请求接收完毕时（状态为4）,且响应状态码为200时，获取响应内容
                if(xhr.readyState == 4  && xhr.status == 200){
                    // 获取响应内容
                    console.log(xhr.response);
                    //console.log(typeof xhr.response);
                    // 遍历数据
                    xhr.response.forEach(item => {
                        console.log(item);
                    });

                    // 若响应内容为json字串，如何处理
                    // const data = JSON.parse(xhr.responseText);
                    // console.log(data);
                }
            };

        };
            
    </script>
</body>
</html>
